<template>
<div>
  <div class="box" v-if="boxShow">
        <div v-if="ok" class="box_yes hairlines">
            <div class="small">贝浩登&nbsp;PERROTIN</div>
            <div class="end"><div>{{ $t('orderSuccess') }}</div></div>
        </div>
        <div v-if="no" class="box_yes hairlines">
            <div class="small">贝浩登&nbsp;PERROTIN</div>
            <div class="end"><div>{{ $t('orderFail') }}</div></div>
        </div>
        <div v-if="before" class="box_yes hairlines">
            <div class="small">贝浩登&nbsp;PERROTIN</div>
            <div class="end"><div>{{ $t('orderBefore') }}</div></div>
        </div>
    </div>   
  <div class="home">
    <div class="bottom" v-if="Object.keys(param).length > 0">
      <!-- 返回 -->
        <div class="back">
          <div class="myback"><img src="../img/back.png" alt=""/></div>
          <button @click="go">
           {{ $t('back') }}
          </button>
        </div>
        <!-- <div class="mylist"><img class="list" :src="param.appointment_info_pic" alt=""></div> -->
<div class="mylist" :style="{ 'background-image':`url('${param.appointment_info_pic}')` }">
            </div>
        <div class="phone name">
            <input class="select" type="text" v-model="param.name" :placeholder="$t('placeholder.name')">
        </div>
        <div class="phone">
            <input class="select" type="text" v-model="param.tel" :placeholder="$t('placeholder.phone')">
        </div>

        <!-- <div class="phone">
            <input class="select" type="text" v-model="param.dates" placeholder="选择日期">
        </div>
        <div class="phone">
            <input class="select" type="text" v-model="param.times" placeholder="选择时间段">
        </div> -->

        <div class="phone">
          <input v-if="!show" class="select" type="text" v-model="param.dates" @click="calendarShow = true" readonly unselectable="on" onfocus="this.blur()"/>
        </div>
        <div class="phone">
            <input class="select" type="text" v-model="param.times" @click="timesShow = true" readonly unselectable="on" onfocus="this.blur()"/>
        </div>
        <div class="state">
            <button :class="{active:isActive}" class="yes">
                {{ $t('orderOk') }}&nbsp;{{param.num}}</button>
            <button :class="{noActive:isNoActive}" class="no">
                {{ $t('orderNo') }}&nbsp;{{param.num_surplus}}</button>
        </div>
        <div class="my">
            <button class="mybtn" @click="clickbtn">{{ $t('ordergO') }}</button>
        </div>
    </div>
    
    <!-- <div class="box" v-if="boxShow">
      <div v-if="ok" class="box_yes">{{ $t('orderSuccess') }}</div>
      <div v-if="no" class="box_yes">{{ $t('orderFail') }}</div>
      <div v-if="before" class="box_yes">{{ $t('orderBefore') }}</div>
    </div> -->
    <van-popup v-model="calendarShow" position="bottom" :overlay="true">
      <van-datetime-picker
        v-model="chose_date"
        type="date"
        :max-date="max_date"
        :min-date='min_date'
        @confirm='confirm'
        @cancel='cancel'
      />
    </van-popup>
    <van-popup v-model="timesShow" position="bottom" :overlay="true">
      <van-picker
        :columns="timeList" @cancel="onCancel"
        @confirm="onConfirm"
        show-toolbar
      />
    </van-popup>
  </div>
</div>
</template>

<script>
import Calendar from "vue-calendar-component";
import { Popup, DatetimePicker, Picker } from "vant";
import moment from "moment";
export default {
  // name: "home"
  components: {
    Calendar,
    [Popup.name]: Popup,
    [DatetimePicker.name]: DatetimePicker,
    [Picker.name]: Picker
  },
  data() {
    return {
      datestime: true,
      datestime1: true,
      timeNum: "",
      boxShow: false,
      ok: false,
      no: false,
      before: false,
      show: false,
      // aa: "日期",
      info: {},

      isActive: true,
      isNoActive: true,
      mypic:
        "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2254957257,3668952885&fm=26&gp=0.jpg",
      param: {
        exhibition_id: this.$route.params.id,
        dates: "",
        name: "",
        tel: ""
      },

      tel: "",
      calendarShow: false,
      min_date: new Date(),
      max_date: new Date(),
      // moment()
      //   .add(1, "weeks")
      //   .format()
      chose_date: new Date(),
      timesShow: false,
      // timeList: [
      //   "11:00-11:45",
      //   "12:00-12:45",
      //   "13:00-13:45",
      //   "14:00-14:45",
      //   "15:00-15:45",
      //   "16:00-16:45",
      //   "17:00-17:45",
      //   "18:00-18:45"
      // ],
      timeList: [
        { text: "11:00-11:45", index: 1 },
        { text: "12:00-12:45", index: 2 },
        { text: "13:00-13:45", index: 3 },
        { text: "14:00-14:45", index: 4 },
        { text: "15:00-15:45", index: 5 },
        { text: "16:00-16:45", index: 6 },
        { text: "17:00-17:45", index: 7 },
        { text: "18:00-18:45", index: 8 }
      ]
    };
  },
  methods: {
    go: function() {
      this.$router.go(-1); //返回上一页
    },
    stateChange() {
      this.isActive = !this.isActive;
      this.isNoActive = !this.isNoActive;
    },
    clickbtn() {
      if (!this.param.name) {
        // this.$Toast("请输入姓名");
        this.$Toast(this.$t("tips.name"));
        return false;
      }
      if (!this.param.tel || isNaN(this.param.tel)) {
        // this.$Toast("请输入手机号");
        this.$Toast(this.$t("tips.phone"));
        return false;
      }
      var myDate = new Date(Date.parse(this.chose_date));
      var weekDay = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      if (myDate > new Date(Date.parse("2018-11-12"))) {
        // console.log("big");
        if (
          weekDay[myDate.getDay()] == "星期日" ||
          weekDay[myDate.getDay()] == "星期一"
        ) {
          // this.$Toast("周日与周一为非工作日！");
          this.$Toast(this.$t("tips.week"));
          this.datestime = false;
          return false;
        } else {
          //确认日期调
          this.datestime = true;
          this.searchNum(this.$route.params.id);
        }
      } else {
        // console.log("small");
        if (weekDay[myDate.getDay()] == "星期一") {
          // this.$Toast("周日与周一为非工作日！");
          this.$Toast(this.$t("tips.week1"));
          this.datestime1 = false;
          return false;
        } else {
          //确认日期调
          this.datestime1 = true;
          this.searchNum(this.$route.params.id);
        }
      }
      // if (this.datestime == false) {
      //   // this.$Toast("周日与周一为非工作日！");
      //   this.$Toast(this.$t("tips.week"));
      //   return false;
      // }
      // if (this.datestime1 == false) {
      //   // this.$Toast("周日与周一为非工作日！");
      //   this.$Toast(this.$t("tips.week1"));
      //   return false;
      // }

      this.postOrder();
    },
    getOrderList(id) {
      this.$http
        .get("/appointmentOne", {
          params: {
            id: id
          }
        })
        .then(response => {
          this.param = response.data;
          this.min_date = new Date(this.param.dates);
          this.max_date = new Date(this.param.endtime);
          this.param.dates = this.param.dates;
          this.timeList.forEach(element => {
            if (element.text == response.data.times) {
              this.timeNum = element.index;
            }
          });
          // if (typeof this.param.dates == "undefined") {
          //   this.param.dates = moment().format("YYYY-MM-DD");
          // }
        })
        .catch(function(response) {
          console.log(response);
        });
    },
    postOrder(tel) {
      this.$http
        .get("/createAppointment", {
          // params: this.param
          params: {
            exhibition_id: this.$route.params.id,
            times: this.param.times,
            dates: this.param.dates,
            tel: this.param.tel,
            name: this.param.name
          }
        })
        .then(response => {
          // console.log(response.data);
          if (response.data == 1) {
            this.before = false;
            this.no = false;
            this.boxShow = true;
            this.ok = true;
            var that = this;
            setTimeout(function() {
              that.boxShow = false;
              // that.$router.go(0);
              that.$router.push({ path: `/queryList/${that.param.tel}` });
            }, 3000);

            // that.ok = false;
          } else if (response.data == 0) {
            this.ok = false;
            this.before = false;
            this.boxShow = true;
            this.no = true;
            var that = this;
            setTimeout(function() {
              that.boxShow = false;
            }, 3000);
          } else if (response.data == 2) {
            this.no = false;
            this.ok = false;
            this.boxShow = true;
            this.before = true;
            var that = this;
            setTimeout(function() {
              that.boxShow = false;
              that.$router.push({ path: `/queryList/${that.param.tel}` });
            }, 3000);
            // that.before = false;
          }
        })
        .catch(function(response) {
          console.log(response);
        });
    },
    confirm(value) {
      // this.param.dates = moment(this.chose_date).format("YYYY-MM-DD");
      this.$set(
        this.param,
        "dates",
        // moment(this.chose_date).format("YYYY-MM-DD")
        moment(this.chose_date).format("YYYY-MM-DD")
      );
      this.calendarShow = false;
      console.log(this.chose_date);
      var weekDay = [
        "星期日",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ];
      var myDate = new Date(Date.parse(this.chose_date));
      // if (
      //     weekDay[myDate.getDay()] == "星期日" ||
      //     weekDay[myDate.getDay()] == "星期一"
      //   ) {
      //     // this.$Toast("周日与周一为非工作日！");
      //     this.$Toast(this.$t("tips.week"));
      //     this.datestime = false;
      //   } else {
      //     //确认日期调
      //     this.datestime = true;
      //     this.searchNum(this.$route.params.id);
      //   }
      if (myDate > new Date(Date.parse("2018-11-12"))) {
        // console.log("big");
        if (
          weekDay[myDate.getDay()] == "星期日" ||
          weekDay[myDate.getDay()] == "星期一"
        ) {
          // this.$Toast("周日与周一为非工作日！");
          this.$Toast(this.$t("tips.week"));
          this.datestime = false;
        } else {
          //确认日期调
          this.datestime = true;
          this.searchNum(this.$route.params.id);
        }
      } else {
        // console.log("small");
        if (weekDay[myDate.getDay()] == "星期一") {
          // this.$Toast("周日与周一为非工作日！");
          this.$Toast(this.$t("tips.week1"));
          this.datestime1 = false;
        } else {
          //确认日期调
          this.datestime1 = true;
          this.searchNum(this.$route.params.id);
        }
      }
      // console.log(weekDay[myDate.getDay()]); // 星期六
    },
    cancel() {
      this.calendarShow = false;
    },

    onConfirm(value, index) {
      this.$set(this.param, "times", value.text);
      this.timeNum = value.index;
      this.timesShow = false;
      //确认时间调
      this.searchNum(this.$route.params.id);
    },
    onCancel() {
      this.timesShow = false;
    },

    searchNum(id) {
      this.$http
        .get("/searchNum", {
          params: {
            // id: this.param.exhibition_id,
            id: id,
            dates: this.param.dates,
            // times: this.param.times
            times: this.timeNum
          }
        })
        .then(response => {
          // console.log(response.data);
          this.param.num = response.data.num;
          this.param.num_surplus = response.data.num_surplus;
        })
        .catch(function(response) {
          console.log(response);
        });
    }
  },
  created() {
    this.getOrderList(this.$route.params.id);
  }
};
</script>
<style lang="scss" scoped>
.ignore {
  border-bottom: 1px solid black;
}
.hairlines {
  border: 1px solid black;
}
.active {
  //   color: red;
  background-color: #ccc;
}
.noActive {
  background-color: white;
}
.box {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-align: center;
  z-index: 5;
  .box_yes {
    width: 184px;
    height: 134px;
    border-radius: 6px;
    background-color: white;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    top: auto;
    .small {
      width: 100%;
      height: 22px;
      background-color: black;
      color: white;
      font-size: 12px;
      border-radius: 5px 5px 0 0;
      line-height: 22px;
    }
    .end {
      flex: 1;
      padding: 0 10px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.home {
  width: 100%;
  // height: 100vh;
  display: flex;
  flex-flow: column;

  .bottom {
    // flex: 1;
    width: 100vw;
    position: relative;
    // top: 53px;
    .back {
      height: 40px;
      width: 100%;
      position: fixed;
      background-color: white;
      top: 8vh;
      // line-height: 30px;
      display: flex;
      flex-flow: wrap;
      align-items: center;
      z-index: 3;
      border-top: 1px solid black;
      .myback {
        width: 15px;
        height: 15px;
        margin-left: 15px;
        // line-height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 100%;
          height: 100%;
        }
      }

      button {
        font-size: 12px;
        border: 0;
        background: white;
        padding: 0 0 0 0px;
        font-weight: bolder;
        // width: 25px;
        height: 15px;
        // line-height: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
    .mylist {
      margin-top: 39px;
      width: 345px;
      // padding: 0 15px;
      background-repeat: no-repeat !important;
      background-position: center center !important;
      background-size: cover !important;
      // height: 250px;
      height: 180px;
      left: 15px;
      position: relative;
      // width: 315px;
      img {
        width: 100%;
        height: 100%;
      }
    }

    ul {
      font-size: 22px;
      li {
        height: 38.8px;
        line-height: 38.8px;
        list-style-type: none;

        position: relative;
        left: -24px;
        top: -6px;
        a {
          text-decoration: none;
          color: black;
        }
      }
    }
    .phone {
      // height: 53.4px;
      height: 55px;
      width: 100vw;
      min-width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      .wh_container {
        z-index: 2;
      }

      .select {
        width: 280px;
        height: 38.4px;
        border: 1px solid #333;
        color: #333;
        font-size: 14px;
        padding: 0 10px;
      }
    }
    .name {
      margin-top: 15px;
      // margin-top: 20px;
    }
    .state {
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 53.4px;
      height: 55px;
      font-size: 14px;
      //   flex-flow: wrap;
      .yes {
        width: 150px;
        height: 38.4px;
        text-align: center;
        border: 0;
      }
      .no {
        width: 150px;
        height: 38.4px;
        text-align: center;
        border: 0;
      }
    }
    .my {
      display: flex;
      justify-content: center;
      align-items: center;
      // height: 53.4px;
      height: 55px;
      margin-bottom: 2vh;
      .mybtn {
        width: 300px;
        height: 38.4px;
        border: 2px solid black;
        font-size: 15px;
        background-color: white;
      }
    }
    .mydate {
      // background-color: rgba(0, 0, 0, 0.5);
      width: 100%;
      height: 100vh;
      position: fixed;
    }
  }
}
</style>

